<template>
  <el-container>
    <el-header>
      <h1>个人中心</h1>
    </el-header>
    <el-main>
      <el-card style="width: 500px">
        <div class="profile-info">
          <el-form label-width="100px">
            <el-form-item label="姓名">
              <el-input v-model="userInfo.name"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="userInfo.email"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="userInfo.phone"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="userInfo.gender"></el-input>
            </el-form-item>
            <el-form-item label="生日">
              <el-input v-model="userInfo.birthday"></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="userInfo.address"></el-input>
            </el-form-item>
          </el-form>
          <el-button type="primary" @click="save">保存</el-button>
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref } from 'vue';

// 用户信息
const userInfo = ref({
  name: '张三',
  email: 'zhangsan@example.com',
  phone: '138-0000-0000',
  gender: '男',
  birthday: '1990-01-01',
  address: '重庆市南岸区某某街道',
});

// 保存修改的函数
const save = () => {
  console.log('用户信息已保存:', userInfo.value);
  // 这里可以添加保存到服务器或本地的逻辑
};
</script>

<style scoped>
.profile-info {
  padding: 20px;
}
</style>